<template>
    <div id="mainView">
        <div class="left-chart aside-chart">
            <chart-list :chartList="leftList"> </chart-list>
        </div>

        <div class="right-chart aside-chart">
            <chart-list :chartList="rightList"> </chart-list>
        </div>

        <div class="middle-chart">
            <div class="middle-title">禄丰市紧密型医共体</div>
            <div class="middle-top-chart" id="charts-container">
                <!-- <img src="../assets/image/mainView/rmyy.jpeg" alt="" /> -->
            </div>
            <div class="pallet1"></div>
            <div class="pallet2"></div>
            <canvas class="fire_fly" id="animateBg"></canvas>
            <div class="middle-bottom-chart">
                <bottom-table></bottom-table>
            </div>
        </div>
    </div>
</template>
<script>
import echarts from "echarts";
import "echarts-gl";
import chartList from "../components/chartList.vue";
import bottomTable from "../components/bottomTable";
export default {
    name: "views",
    components: {
        chartList,
        bottomTable,
    },
    data() {
        return {
            mapObj: null,
            leftList: [],
            rightList: [],
            city: {
                lufeng: require("./../assets/json/lf.json"),
            },
        };
    },
    mounted() {
        this.leftList = [
            {
                name: "总览",
                url: "total",
            },
            {
                name: "患者医院分布",
                url: "outpatient",
            },
            {
                name: "患者就诊科室",
                url: "management",
            },
        ];
        this.rightList = [
            {
                name: "医护数量统计",
                url: "inpatients",
            },
            {
                name: "结算方式",
                url: "operationIncome",
            },
            {
                name: "流行病曲线",
                url: "overview",
            },
        ];
        this.initMap(this.city["lufeng"], "禄丰市", [
            {
                name: "禄丰市广通中心卫生院",
                value: ["101.7582", "25.169278", "1"],
            },
            {
                name: "禄丰市高峰乡卫生院",
                value: ["101.866974", "25.340753", "1"],
            },
            {
                name: "禄丰市妥安乡卫生院",
                value: ["101.72647", "25.321239", "1"],
            },
            {
                name: "禄丰市土官镇卫生院",
                value: ["102.196980", "24.950560", "1"],
            },
            {
                name: "禄丰市一平浪中心卫生院",
                value: ["101.91199", "25.164204", "1"],
            },
            {
                name: "禄丰市仁兴镇卫生院",
                value: ["102.29", "25.38", "1"],
            },
            {
                name: "禄丰市勤丰镇卫生院",
                value: ["102.175770", "25.104603", "1"],
            },
            {
                name: "禄丰市恐龙山镇卫生院",
                value: ["102.053699", "24.904762", "1"],
            },
            {
                name: "禄丰市彩云中心卫生院",
                value: ["101.880474", "25.008416", "1"],
            },
            {
                name: "禄丰市罗次中心卫生院",
                value: ["102.30477", "25.311023", "1"],
            },
            {
                name: "禄丰市中村乡卫生院",
                value: ["102.07025", "25.252306", "1"],
            },
            {
                name: "禄丰市和平镇卫生院",
                value: ["102.205853", "25.211056", "1"],
            },
            {
                name: "禄丰市黑井中心卫生院",
                value: ["101.754298", "25.382998", "1"],
            },
        ]);
    },

    methods: {
        initMap(mapJson, name, data) {
            this.mapObj = echarts.init(
                document.getElementById("charts-container")
            );
            echarts.registerMap(name, mapJson);
            const option = {
                // geo: {
                //     show: false,
                //     map: name,
                //     boxWidth: 110, //三维地图在三维场景中的宽度
                //     boxDepth: 90, //三维地图在三维场景中的深度
                //     boxHeight: 6,
                //     top: "-5%",
                //     viewControl: {
                //         //alpha: 70,
                //         distance: 110,

                //         rotateSensitivity: 0,
                //         projection: "orthographic",
                //         orthographicSize: 90, //控制地图大小
                //         maxOrthographicSize: 90,
                //         minOrthographicSize: 90,
                //         autoRotate: false,
                //         animation: true,
                //         alpha: 50,
                //         beta: 0,
                //         animationDurationUpdate: 20,
                //     },
                //     label: {
                //         show: true,
                //         textStyle: {
                //             color: "#fff",
                //             fontSize: 26,
                //             backgroundColor: "transparent",
                //             opacity: 1,
                //         },
                //         emphasis: {
                //             show: true,
                //         },
                //     },
                //     itemStyle: {
                //         normal: {
                //             borderWidth: 3,
                //             borderColor: "#48FFDC",
                //             areaColor: "#33baff",
                //             opacity: 0.8,
                //         },
                //     },
                // },
                series: [
                    {
                        type: "scatter",
                        coordinateSystem: "geo",
                        symbol: 'path://"M9.89,26.93s9.89-8.48,9.89-17.29A9.86,9.86,0,0,0,9.89,0,9.82,9.82,0,0,0,0,9.64C0,18.78,9.89,26.93,9.89,26.93Zm-5.4-17a5.4,5.4,0,1,1,5.4,5.4h0A5.39,5.39,0,0,1,4.49,10v0Z""',
                        symbolSize: [30, 40],
                        color: "#ffe000",
 
                        data: data,
                        zlevel: 2,
                        label: {
                            normal: {
                                show: true,
                                formatter: "{b}",
                            position: "bottom",
                            show: true,
                            textStyle: {
                                color: "#fff",
                                fontSize: 18,
                            },
                            },
                        },
                    },

                    {
                        type: "map",
                        viewControl: {
                            // alpha: 50,
                            distance: 110,

                            rotateSensitivity: 0,
                            projection: "orthographic",
                            orthographicSize: 90, //控制地图大小
                            maxOrthographicSize: 90,
                            minOrthographicSize: 90,
                            autoRotate: false,
                            animation: true,
                            alpha: 50,
                            beta: 0,
                            animationDurationUpdate: 20,
                        },
                        map: name,
                        regionHeight: 6, //模型的高度
                        boxWidth: 110, //三维地图在三维场景中的宽度
                        boxDepth: 90, //三维地图在三维场景中的深度
                        top: "-5%",
                        label: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                                fontSize: 26,
                                backgroundColor: "transparent",
                                opacity: 1,
                            },
                            emphasis: {
                                show: true,
                            },
                        },
                        itemStyle: {
                            normal: {
                                borderWidth: 3,
                                borderColor: "#2b8efa",
                                color: "#2b8efa",
                                opacity: 0.5,
                            },
                            emphasis: {
                                areaColor: "#6a6aff",
                                borderWidth: 2,
                                color: "#6a6aff",
                                opacity: 1,
                            },
                        },
                    },
                ],
            };
            this.mapObj.setOption(option);
        },
    },
};
</script>
<style lang="scss">
#mainView {
    height: 100%;
    .aside-chart {
        width: 450px;
        height: 100%;
        position: absolute;
        top: 0;
        &.left-chart {
            left: 0;
        }
        &.right-chart {
            left: 1470px;
        }
    }
    .middle-chart {
        width: 1020px;
        height: 100%;
        position: absolute;
        left: 450px;
        .middle-title {
            height: 115px;
            background: #071f4f;
            font-size: 70px;
            color: #fff;
            font-weight: 500;

            text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85,
                -20px -20px 40px #ffae34, 20px -40px 50px #ec760c,
                0 -80px 70px #f38e1c; /*设置文字阴影*/
            -webkit-animation: flame 2s infinite; /*设置动画*/
        }

        .middle-top-chart {
            width: 100%;
            height: 646px;
            background: #071f4f;
            // img {
            //     height: 100%;
            //     width: 100%;
            //     object-fit: over;
            // }
        }

        .middle-bottom-chart {
            width: 100%;
            height: 434px;
        }
    }
    .amap-marker-label {
        background-color: transparent;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        border: none;
        .info {
            height: 25px;
        }
    }
    .fire_fly {
        position: absolute;
        top: 0;
        left: 0;
    }

    .pallet1,
    .pallet2 {
        position: absolute;
        border-radius: 50%;
        transform: rotateX(84deg);
    }
    .pallet1 {
        top: 490px;
        left: 318px;
        width: 420px;
        height: 420px;
        animation: rotate3d 15s infinite linear;
        background: url("../assets/image/mainView/rotate_bg1.png") 0 0/100% 100%
            no-repeat;
    }
    .pallet2 {
        top: 265px;
        left: 75px;
        width: 900px;
        height: 900px;
        animation: rotate3d 15s infinite linear reverse;
        background: url("../assets/image/mainView/rotate_bg2.png") 0 0/100% 100%
            no-repeat;
    }
    @keyframes rotate3d {
        0% {
            transform: rotateX(84deg) rotateZ(360deg);
        }
        100% {
            transform: rotateX(84deg) rotateZ(0);
        }
    }
}
</style>
